<html>
<head>
	<script type="text/javascript">
		mxBasePath = '../../../javascript/src';
	</script>
	<script type="text/javascript" src="../../../javascript/src/js/mxClient.js"></script>
	<script type="text/javascript">
		function main(container)
		{
			var graph = new mxGraph(container);
			graph.setHtmlLabels(true);
			var parent = graph.getDefaultParent();
			
			graph.getModel().beginUpdate();
			try
			{
				var v1 = graph.insertVertex(parent, null, 'Hello,', 240, 20, 120, 80,
					'shape=image;image=http://www.jgraph.com/images/mxgraph.gif;perimeter=rectanglePerimeter;');
			}
			finally
			{
				graph.getModel().endUpdate();
			}
			
			document.body.appendChild(mxUtils.button('+', function()
			{
				graph.zoomIn();
			}));
			document.body.appendChild(mxUtils.button('-', function()
			{
				graph.zoomOut();
			}));
			
			mxEvent.addListener(container, 'resize', function()
			{
				console.log('container resize', container.clientWidth);
			});
			
			mxEvent.addListener(window, 'resize', function()
			{
				console.log('window resize', container.clientWidth);
			});
			
			document.body.appendChild(mxUtils.button('show', function()
			{
				container.style.display = 'block';
			}));
			
			console.log('init', container.clientWidth);
		};
	</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
	<div id="graphContainer" onresize="console.log('onresize');" style="display:none;overflow:hidden;width:100%;height:481px;border:1px solid gray;cursor:default;">
	</div>
	Problem: No resize event if display changes from none to block, especially if a parent style is changed and the
	container becomes visible via the parent style change.
	<br><br>
</body>
</html>